<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>北森云计算鹰眼感知监控</title>
<link rel="stylesheet" href="css/base.css">
</head>
<script type="text/javascript" src="echarts/echarts.min.js"></script>
<script type="text/javascript" src="echarts/china.js"></script>
<script type="text/javascript" src="echarts/jquery.min.js"></script>

<script src="js/jquery-2.2.1.min.js"></script>
	<script src="js/echarts.js"></script>
	<!-- <script src="http://api.map.baidu.com/api?v=2.0&ak=dApOtvB5E3x6byHpUGHbRF1fxctCBdjw"></script> -->
	<script src="js/echarts-gl.js"></script>
	<script src="js/ace.js" ></script>
	<script src="js/bmap.js"></script>
	<script src="js/dataTool.js"></script>
	<script src="js/util.js"></script>
	<script src="js/ALL.js"></script>
		<script src="js/china.js"></script>
	<body>
		<div class="bg">
			<div>
				<div class="header_1"></div>
				<span style="margin-left: 5px;float: left;margin-top: 35px;font-size: 20px;color: #ffffff">北森云计算鹰眼感知系统</span>			
			</div>
			<div class="header">
			</div>
			<div style="margin-top: 30px">
				<h1 style="font-size: 35px;margin-top: -96px;color: #ffffff;margin-left: 40.8%">北森云计算鹰眼感知监控</h1>
			</div>
			<div>
				<div class="left_1">
					<div style="font-family: '微软雅黑';color: #fff;float:left;margin-top: 5px;font-size: 18px;margin-left: 35px;font-weight: bold;">全国热度分布</div> 
					<div id="map_1" style="height: 90%;width: 100%;margin-left: 10%;"></div>
				</div>
				<div class="left_2">
					<span style="font-family: '微软雅黑';color: #fff;float:left;margin-top: 4px;font-size: 18px;margin-left: 28px;font-weight: bold;">产品可用性监控</span>
					<div class="left_21">
						<span id="c_number" style="font-size:38px;float:lefe;margin-left:3px "></span>
						<span style="font-size:38px;">%</span><br>
						<div id="c_name" style="margin-top: -270px;font-size: 20px;"></div>
					</div>
				</div>
				<div class="left_3">
					<div id="bottomleft" style="width: 100%;height: 100%;"></div>
				</div>
			</div>
			<div>
				<div class="middle_1">
					<span style="font-family: '微软雅黑';color: #fff;float:left;margin-top: 8px;font-size: 18px;margin-left: 35px;font-weight: bold;">网络攻击世界防御地图</span>
				  	<div id="middle1" style="float:top;height: 80%;width: 100%;margin-top: 11%;margin-left: 2%;"></div>
				  	<div id="scrollDiv" style="font-family: '微软雅黑';color: #fff;margin-left:15px;margin-top:-10px">
								<ul>
									<li>14:07防御了来自美国纽约对www.nlu.com的HTTP协议异常攻击</li>
									<li>14:10防御了来自英国伦敦对www.why.com的HTTP协议异常攻击</li>
									<li>14:20防御了来自美国纽约对www.yxy.com的HTTP协议异常攻击</li>
									<li>14:50防御了来自美国纽约对www.uih.com的HTTP协议异常攻击</li>
									<li>14:52防御了来自美国纽约对www.iuj.com的HTTP协议异常攻击</li>
								</ul>
					</div>


				</div>
				<div class="middle_2">	
					<span style="font-family: '微软雅黑';color: #fff;float:left;margin-top: 4px;font-size: 18px;margin-left: 20px;font-weight: bold;">数据分析</span>
					<div id="middle2" style="float:top;height: 80%;width: 70%;margin-top: 8%;margin-left:1%"></div>
					<div style="float:right;height:80%;width:30%;background-color:rgba(230,230,230,0.5);background-size:100% 100%;margin-top:-53%;margin-right:6%">
						<div style="float:left;width:100%;height:35%;background: url('img/middle_2.gif');background-size:100% 100%;margin-top:15%">
							<span id="qiyenumber" style="color:#fff;font-size:23px;margin-left:22%;margin-top:-20%"></span><br>
							<span style="color:#fff;font-size:10px;margin-left:10%;margin-top:50%">近期活跃企业数</span>
						</div>
						<div style="float:left;width:100%;height:35%;background: url('img/middle_2.gif');background-size:100% 100%;margin-top:25%">
							<span id="yonghunumber" style="color:#fff;font-size:23px;margin-left:20%;"></span><br>
							<span style="color:#fff;font-size:10px;margin-left:10%;margin-top:50%">近期活跃用户数</span>
						</div>					
					</div>					
				</div>

				<div class="middle_3">
					<span style="font-family: '微软雅黑';color: #fff;float:left;margin-top: 4px;font-size: 18px;margin-left: 40px;font-weight: bold;">排名</span>
					<div style="margin-left: 0.5em;margin-top: 3em;">
						<table style="text-align:center;color:#fff" border="0" bordercolor="#000000" width="360" height="200" cellpadding="0" cellspacing="0">
							<tr style="background-color:rgba(0,0,255,0.6)">
								<td id="no1"></td>
								<td id="name1"></td>
								<td id="num1"></td>
							</tr>
							<tr style="background-color:rgba(0,0,255,0.01)">
								<td id="no2"></td>
								<td id="name2"></td>
								<td id="num2"></td>
							</tr>
							<tr style="background-color:rgba(0,0,255,0.6)">
								<td id="no3"></td>
								<td id="name3"></td>
								<td id="num3"></td>
							</tr>
							<tr style="background-color:rgba(0,0,255,0.01)">
								<td id="no4"></td>
								<td id="name4"></td>
								<td id="num4"></td>
							</tr>
							<tr style="background-color:rgba(0,0,255,0.6)">
								<td id="no5"></td>
								<td id="name5"></td>
								<td id="num5"></td>
							</tr>
							<tr style="background-color:rgba(0,0,255,0.01)">
								<td id="no6"></td>
								<td id="name6"></td>
								<td id="num6"></td>
							</tr>
						</table>
					</div>
				</div>
			</div>
			<div>
				<div class="right_1">
					<span style="font-family: '微软雅黑';color: #fff;float:left;margin-top: 4px;font-size: 17px;margin-left: 40px;font-weight: bold;">平均用电量</span>
					<div id="right1" style="float:top;height: 80%;width: 95%;margin-top: 5.5%;margin-left: 2%;"></div>

				</div>
				<div class="right_2">
					<div id="right2" style="margin-left: 3%;height: 100%;width: 100%;"></div>

				</div>
				<div class="right_3">
					<div id="right3" style="margin-left: 3%;height: 100%;width: 100%;"></div>

				</div>
				<div class="right_4">
					<span style="font-family: '微软雅黑';color: #fff;float:left;margin-top: 4px;font-size: 18px;margin-left: 40px;font-weight: bold;">各时段用电量</span>
					<div id="right4" style="margin-left: 6%;height: 90%;width: 90%;margin-top: 4%;"></div>

				</div>
			</div>
		</div>
	</body>

</html>
<script type="text/javascript">
setInterval(function (){
	$.ajax({
		type : 'post',	//传输类型	
		async : false,	//同步执行
		url : 'paiming.do',	//web.xml中注册的Servlet的url-pattern
		data : {},
		dataType:"json",
		success : function(result) {	
			document.getElementById("no1").innerText ="NO."+result[0].id;
			document.getElementById("no2").innerText ="NO."+result[1].id;
			document.getElementById("no3").innerText ="NO."+result[2].id;
			document.getElementById("no4").innerText ="NO."+result[3].id;
			document.getElementById("no5").innerText ="NO."+result[4].id;
			document.getElementById("no6").innerText ="NO."+result[5].id;
			document.getElementById("name1").innerText = result[0].name;
			document.getElementById("num1").innerText = result[0].num;
			document.getElementById("name2").innerText = result[1].name;
			document.getElementById("num2").innerText = result[1].num;
			document.getElementById("name3").innerText = result[2].name;
			document.getElementById("num3").innerText = result[2].num;
			document.getElementById("name4").innerText = result[3].name;
			document.getElementById("num4").innerText = result[3].num;
			document.getElementById("name5").innerText = result[4].name;
			document.getElementById("num5").innerText = result[4].num;
			document.getElementById("name6").innerText = result[5].name;
			document.getElementById("num6").innerText = result[5].num;
		},	
		error : function(errorMsg) {
			alert("加载数据失败");
		}
	});//AJAX
 }, 5000);



	$.ajax({
		type : 'post',
		url : 'ChanpinSelectServlet',
		data : {},
		dataType : 'json',
		success : function(data) {
			document.getElementById("c_name").innerText = data[0].name;
			document.getElementById("c_number").innerText = data[0].number;
		}
	});
	
	$.ajax({
		type : 'post',
		url : 'ShujuSelectServlet',
		data : {},
		dataType : 'json',
		success : function(data) {
			document.getElementById("qiyenumber").innerText = data[0].qiyenumber;
			document.getElementById("yonghunumber").innerText = data[0].yonghunumber;
		}
	});

	function autoscroll(obj) {//这里的25px是#scrollDiv的高度
		$(obj).find("ul:first").animate({
			marginTop: "-25px"
		}, 1000, function() {
			$(this).css("marginTop", "0px").find("li:first").appendTo(this)
		}) /*$(this).css("marginTop","0px")这里也许会有人搞不明白，为什么又设为0。因为在ul向上移25px的时候，其第一个li会添加到ul的末尾，如果ul的marginTop不设为0的话，整个ul就会慢慢移出它的父盒子，最后使得它的父盒子变空，实现不了原本想要实现的效果。*/
	}
	
	$(document).ready(function() {
		setInterval('autoscroll("#scrollDiv")', 5000)
	})

	</script>
